<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="/js/ajaxfileupload.js"></script>
    <title>文本分词</title>
    <style>
        #test,#test1{min-height:250px;overflow-y:auto;max-height:300px;}
        #main-nav {
            margin-left: 1px;
        }
        #main-nav.nav-tabs.nav-stacked > li > a {
            padding: 10px 8px;
            font-size: 12px;
            font-weight: 600;
            color: #4A515B;
            background: #E9E9E9;
            background: -moz-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#E9E9E9));
            background: -webkit-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            background: -o-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            background: -ms-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            background: linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9');
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9')";
            border: 1px solid #D5D5D5;
            border-radius: 4px;
        }
        #main-nav.nav-tabs.nav-stacked > li > a > span {
            color: #4A515B;
        }
        #main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > a:hover {
            color: #FFF;
            background: #3C4049;
            background: -moz-linear-gradient(top, #4A515B 0%, #3C4049 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4A515B), color-stop(100%,#3C4049));
            background: -webkit-linear-gradient(top, #4A515B 0%,#3C4049 100%);
            background: -o-linear-gradient(top, #4A515B 0%,#3C4049 100%);
            background: -ms-linear-gradient(top, #4A515B 0%,#3C4049 100%);
            background: linear-gradient(top, #4A515B 0%,#3C4049 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A515B', endColorstr='#3C4049');
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A515B', endColorstr='#3C4049')";
            border-color: #2B2E33;
        }
        #main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > a:hover > span {
            color: #FFF;
        }
        #main-nav.nav-tabs.nav-stacked > li {
            margin-bottom: 4px;
        }
        /*定义二级菜单样式*/
        .secondmenu a {
            font-size: 10px;
            color: #4A515B;
            text-align: center;
        }
        .navbar-static-top {
            background-color: #212121;
            margin-bottom: 5px;
        }
        .navbar-brand {
            background: url('') no-repeat 10px 8px;
            display: inline-block;
            vertical-align: middle;
            padding-left: 50px;
            color: #fff;
        }
        #right{min-height:385px;min-width:650px;overflow-y:auto;overflow-x:auto;max-height:385px;max-width:700px;}
    </style>
</head>
<body>
<div  id="app" class="container">

    <!--第一行 系统logo-->
    <div class="row clearfix">
        <div class="col-md-4 column">
        </div>
        <div class="col-md-4 column">
            <h1>医疗数据挖掘平台</h1>
        </div>
        <div class="col-md-4 column">
        </div>
    </div>
    <br/>
    <div class="row clearfix">
        <!--左侧菜单-->
        <div id="tree" class="col-md-2 column">
            <!--左侧树形菜单-->
            <!--左侧树形菜单-->
            <ul id="main-nav" class="nav nav-tabs nav-stacked" style="">
                <li class="active">
                    <a href="#">
                        <i class="glyphicon glyphicon-th-large"></i>
                        首页
                    </a>
                </li>

                <li>
                    <a href="#" @click="input_file()">
                        <i class="glyphicon glyphicon-credit-card"></i>
                        导入数据
                    </a>
                </li>

                <li >
                    <a href="#systemSetting" class="nav-header collapsed" data-toggle="collapse">
                        <i class="glyphicon glyphicon-cog"></i>
                        数据预处理
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="systemSetting" class="nav nav-list collapse secondmenu" style="height: 0px;">
                        <li><a href="#" @click="attribute_gen()"><i class="glyphicon glyphicon-user" ></i>属性预处理</a></li>
                        <li><a href="#" @click="instance_gen()"><i class="glyphicon glyphicon-th-list"></i>实例预处理</a></li>
                    </ul>
                </li>

                <li >
                    <a href="#classify" class="nav-header collapsed" data-toggle="collapse">
                        <i class="glyphicon glyphicon-cog"></i>
                        分类分析
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="classify" class="nav nav-list collapse secondmenu" style="height: 0px;">
                        <li><a href="#" @click="linerRegression_gen()"><i class="glyphicon glyphicon-user" ></i>决策树算法/J48</a></li>
                        <li><a href="#" @click="randomForest_gen()"><i class="glyphicon glyphicon-th-list"></i>线性回归/M5P</a></li>
                    </ul>
                </li>
                <li>
                    <a href="./grid.html">
                        <i class="glyphicon glyphicon-globe"></i>
                        回归分析
                    </a>
                </li>
                <li>
                    <a href="./charts.html">
                        <i class="glyphicon glyphicon-calendar"></i>
                        关联规则分析
                    </a>
                </li>
                <li>
                    <a href="./charts.html">
                        <i class="glyphicon glyphicon-calendar"></i>
                        文本分词
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="glyphicon glyphicon-fire"></i>
                        关于系统
                    </a>
                </li>
            </ul>
        </div>
        <!--右侧内容显示模块-->
        <div class="col-md-10 column">

            <!--第一行-->
            <div class="row clearfix">
                <br/>
                <div class="col-md-1 column">
                    <input id="docFile" type="file" style="display: none" name="file" class="form-control" @change="mychange"/>
                </div>
                <div class="col-md-1 column">
                    <button type="button" class="btn btn-info" @click="mybrows">选择文件</button>
                </div>
                <div class="col-md-1 column">
                </div>
                <div class="col-md-4 column">
                    <input id="filePath" type="text" class="form-control"  placeholder="文本文件" style="height: 30px"/>
                </div>
                <div class="col-md-2 column">
                    <button id="submit" type="button" class="btn btn-info" @click="mysubmit()">提交文件</button>
                </div>
            </div>
            <br>
            <!--第二行-->
            <div class="row clearfix">
                <!--左侧显示文本内容-->
               <div class="col-md-5 column">
                      <textarea rows="20" cols="60" readonly="true">
                          {{text}}
                      </textarea>
               </div>
                <div class="col-md-2 column">
                    <select class="form-control"  >
                        <option >统计量大于10</option>
                        <option >统计量大于20</option>
                        <option >统计量大于30</option>
                    </select>
                </div>
                <!--右侧显示分词统计结果-->
                <div style=" overflow-y:auto;height:450px;background-color: rgba(236, 230, 234, 0.33);border-radius:10px 10px 10px 10px">
                   <table width="400px" class="table table-hover">
                       <tr>
                           <td align="center">
                               关键词
                           </td>
                           <td align="center">
                               统计数
                           </td>
                       </tr>
                       <tr v-for="item in infoList" >
                           <td align="center">
                               {{item.key}}
                           </td>
                           <td align="center">
                               {{item.count}}
                           </td>
                       </tr>
                   </table>
                </div>
            </div>
        </div>

    </div>
</div>

<script>
    $(document).ready(function(){
        var vu=new Vue({
            el:'#app',
            data:{
               text:null,
                infoList:[]
            },
            mounted:function(){

            },
            methods:{
                mysubmit:function(){
                    // alert("提交文件")
                    var that=this;
                    if(lg==0){
                        alert("抱歉，您还没有选择文件！")
                        return;
                    }
                    $.ajaxFileUpload({
                        //文件上传接口
                        url : '/ik_controller/fileupload',
                        secureuri : false,
                        fileElementId : 'docFile',
                        dataType: 'json',   //服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
                        async : true,   //是否是异步
                        //成功回调
                        success:function(data) {
                            //第二步：获取返回的数据
                            that.text=data.text;
                            that.infoList=data.list;
                        },
                        error:function(data, status, e) {
                            alert("上传发生异常"+e);
                        }
                    })
                },

                //选择文件按钮（使用了代理模式）
                mybrows:function () {
                    $('#docFile').click();
                },
                mychange:function(){
                    var fp = $("#docFile");
                    lg = fp[0].files.length;
                    var items = fp[0].files;
                    var message=""
                    if (lg > 0) {
                        for (var i = 0; i < lg; i++) {
                            var fileName = items[i].name; // get file name
                            message=fileName
                            var i = fileName.lastIndexOf(".");
                            if(i > -1) {
                                var ext = fileName.substring(i);
                            }
                        }
                    }
                },


                input_file:function(){
                    window.location.href="/html/input_file.html"
                },
                //属性预处理菜单
                attribute_gen:function(){
                    window.location.href="/html/attribute_gen.html"
                },
                instance_gen:function(){
                    window.location.href="/html/instance_gen.html"
                },

                linerRegression_gen:function(){
                    window.location.href="/html/classify.html"
                },

                randomForest_gen:function(){
                    window.location.href="/html/mp5.html"
                },
                ik_par:function () {
                    window.location.href="/html/ik_participle.html"
                }

            },
            computed:{

            }

        })

    });

</script>

</body>
</html>